<script lang="ts" setup>
import { ref } from "vue";
import { InputType, InputValidateTrigger, ListenerProp } from '@varlet/ui';

// 定义 props
defineProps<{
    modelValue?: string
    label?: string
    type?: InputType
    textarea?: boolean
    rows?: string | number
    placeholder?: string
    textColor?: string
    maxlength?: string | number
    disabled?: boolean
    readonly?: boolean
    clearable?: boolean
    resize?: boolean
    autofocus?: boolean
    validateTrigger?: InputValidateTrigger[]
    rules?: Array<(v: string) => any>
    onFocus?: ListenerProp<(e: Event) => void>
    onBlur?: ListenerProp<(e: Event) => void>
    onInput?: ListenerProp<(value: string, e: Event) => void>
    onClear?: ListenerProp<(value: string) => void>
    'onUpdate:modelValue'?: ListenerProp<(value: string) => void>
}>()

// 定义事件
const emit = defineEmits(['update:modelValue', 'clear', 'input', 'focus', 'blur']);

const inputEle = ref();

// 绑定事件
const onFocus = (e: Event) => emit('focus', e);
const onBlur = (e: Event) => emit('blur', e);

// v-model
const onClear = (value: string) => {
    emit('update:modelValue', value);
    emit('clear', value);
};
const onInput = (value: string, e: Event) => {
    emit('update:modelValue', value);
    emit('input', value, e);
};

defineExpose({
    inputEle,
});

</script>
<template>
    <div class="hl-input-box">
        <!-- 添加插槽 -->
        <div class="label" v-if="label || $slots.label">
            <span v-if="label && !$slots.label">{{ label }}</span>
            <slot v-else name="label"></slot>
        </div>
        <VarInput ref="inputEle" :class="{ input: true, textarea: !!textarea }" variant="outlined" :hint="false"
            :line="false" :placeholder="placeholder" :model-value="modelValue" :type="type" :autofocus="autofocus"
            :clearable="clearable" :maxlength="maxlength" :disabled="disabled" :readonly="readonly" :textarea="textarea"
            :rows="rows" :rules="rules" :resize="resize" :text-color="textColor" @clear="onClear" @input="onInput"
            @focus="onFocus" @blur="onBlur" :validate-trigger="validateTrigger || ['onClear', 'onBlur']">
            <template #prepend-icon>
                <!-- 前部插槽 -->
                <slot name="prepend"></slot>
            </template>
            <template #append-icon>
                <!-- 后部插槽 -->
                <slot name="append"></slot>
            </template>
        </VarInput>
    </div>
</template>
<style lang="scss">
@import './input.scss';
</style>
